<script>
import { ref } from "vue";

export default {
  setup() {
    const brands = ref([

      { id: 1, name: '现代', imageUrl: '/src/assets/img/brand1.png'},
      { id: 2, name: '现代', imageUrl: '/src/assets/img/brand2.png'},
      { id: 3, name: '现代', imageUrl: '/src/assets/img/brand3.png'},
      { id: 4, name: '现代', imageUrl: '/src/assets/img/brand4.png'},
      { id: 5, name: '现代', imageUrl: '/src/assets/img/brand5.png'},
      { id: 6, name: '现代', imageUrl: '/src/assets/img/brand6.png'},
      { id: 7, name: '现代', imageUrl: '/src/assets/img/brand7.png'},
      { id: 8, name: '现代', imageUrl: '/src/assets/img/brand7.png'},
      { id: 9, name: '现代', imageUrl: '/src/assets/img/brand7.png'},
      { id: 10, name: '现代', imageUrl: '/src/assets/img/brand7.png'},
      { id: 11, name: '现代', imageUrl: '/src/assets/img/brand7.png'},

    ]);

    return {
      brands
    };
  },
};
</script>

<template>
  <div id="home-catelist">
    <h2><a href="#" class="more">MORE+</a>入驻品牌<i class="iconfont icon-brandauthority"></i></h2>
    <ul>
      <li v-for="brand in brands" :key="brand.id">
        <a :href="`productlist.html?id=${brand.id}`">
          <img :src="brand.imageUrl" :alt="brand.name">
          {{ brand.name }}
        </a>
      </li>
    </ul>
  </div>
</template>

<!--<template>-->
<!--  <div id="home-catelist">-->
<!--    <h2><a href="#" class="more">MORE+</a>入驻品牌<i class="iconfont icon-brandauthority"></i></h2>-->
<!--    <ul>-->
<!--      <li><a href="productlist.html"><img src="/src/assets/img/brand1.png">现代</a></li>-->
<!--      <li><a href="productlist.html"><img src="/src/assets/img/brand2.png">现代</a></li>-->
<!--      <li><a href="productlist.html"><img src="/src/assets/img/brand3.png">现代</a></li>-->
<!--      <li><a href="productlist.html"><img src="/src/assets/img/brand4.png">现代</a></li>-->
<!--      <li><a href="productlist.html"><img src="/src/assets/img/brand5.png">现代</a></li>-->
<!--      <li><a href="productlist.html"><img src="/src/assets/img/brand6.png">现代</a></li>-->
<!--      <li><a href="productlist.html"><img src="/src/assets/img/brand7.png">现代</a></li>-->
<!--      <li><a href="productlist.html"><img src="/src/assets/img/brand8.png">现代</a></li>-->
<!--      <li><a href="productlist.html"><img src="/src/assets/img/brand9.png">现代</a></li>-->
<!--      <li><a href="productlist.html"><img src="/src/assets/img/brand10.png">现代</a></li>-->
<!--      <li><a href="productlist.html"><img src="/src/assets/img/brand11.png">现代</a></li>-->
<!--      <li><a href="productlist.html"><img src="/src/assets/img/brand12.png">现代</a></li>-->
<!--      <li><a href="productlist.html"><img src="/src/assets/img/brand13.png">现代</a></li>-->
<!--      <li><a href="productlist.html"><img src="/src/assets/img/brand14.png">现代</a></li>-->
<!--      <li><a href="productlist.html"><img src="/src/assets/img/brand15.png">现代</a></li>-->
<!--      <li><a href="productlist.html"><img src="/src/assets/img/brand16.png">现代</a></li>-->
<!--      <li><a href="productlist.html"><img src="/src/assets/img/brand17.png">现代</a></li>-->
<!--      <li><a href="productlist.html"><img src="/src/assets/img/brand18.png">现代</a></li>-->
<!--      <li><a href="productlist.html"><img src="/src/assets/img/brand19.png">现代</a></li>-->
<!--      <li><a href="productlist.html"><img src="/src/assets/img/brand1.png">现代</a></li>-->
<!--    </ul>-->
<!--  </div>-->

<!--</template>-->


<style>
#home-catelist .iconfont
{
  margin-left: 10px;
}

h2 .more {
  text-align: center;
  font-family: century gothic;
  font-size: 10px;
  color: #666666;
  float: right;
}

/* home-catelist */
#home-catelist {
  width: 1200px;
  margin: 0 auto;
}

#home-catelist h2,
.product-list h2 {
  line-height: 28px;
  padding-left: 16px;
  margin: 30px 0;
  color: #000000;
  border-left: 3px solid #dd3333;
}

#home-catelist ul {
  overflow: hidden;
  border-radius: 16px;
  padding: 32px 88px 0 88px;
  margin-bottom: 32px;
  box-shadow: 0 0 16px #CCCCCC;
}

#home-catelist li {
  float: left;
  width: 78px;
  text-align: center;
  margin: 0 12px;
  margin-bottom: 32px;
}

#home-catelist li img {
  display: block;
  margin-bottom: 16px;
}

.product-list ul {
  overflow: hidden;
}

.product-list li {
  width: 282px;
  height: 380px;
  background-color: #FFFFFF;
  float: left;
  margin-left: 24px;
  text-align: center;
  color: #000000FF;
}

.product-list li:nth-child(4n+1) {
  margin-left: 0;
}

.product-list li h3 {
  line-height: 32px;
  font-weight: normal;
}

.product-list li h4 {
  color: #a4a4a4;
  line-height: 24px;
  font-weight: normal;
}

.product-list li h4 a {
  color: #a4a4a4;
}

.product-list li a:hover img {
  opacity: 0.8;
}

.product-list p {
  color: #a4a4a4;
  line-height: 24px;
}

</style>
